<template>
  <div class="custom-form-wrapper">
    <template v-if="layout === 'horizontal'">
      <a-row class="custom-form-item">
        <a-col class="custom-form-item-label" :span="col[0]" :offset="offset">{{label}}</a-col>
        <a-col :span="col[1]"><slot/></a-col>
      </a-row>
    </template>
    <template v-if="layout === 'vertical'">
      <a-row class="custom-form-item custom-form-item-vertical">
        <a-col class="custom-form-item-label" :span="24">{{label}}</a-col>
        <a-col :span="24"><slot/></a-col>
      </a-row>
    </template>
  </div>
</template>

<script setup lang="ts">
import type {PropType} from "vue";

type FormLayoutType = 'horizontal' | 'vertical' | 'inline'

defineProps({
  label: {type: String, default: ''},
  col: {type: Array, default:[5,18]},
  offset: {type: Number, default: 0},
  layout: {type: String as PropType<FormLayoutType>, default: 'horizontal'}
})
</script>

<style scoped>
.custom-form-item{
  align-items: center;
  margin-bottom: var(--space);
}
.custom-form-item-label{
  height: 32px;
  display: flex;
  align-items: center;
  text-align: end;
  vertical-align: middle;
  justify-content: end;
}
.custom-form-item-label::after{
  content: ":";
  position: relative;
  margin-block: 0;
  margin-inline-start: 2px;
  margin-inline-end: 8px;
}
.custom-form-item-vertical .custom-form-item-label{
  text-align: start;
  height: auto;
  padding-bottom: 8px;
  justify-content: start;
}
.custom-form-item-vertical .custom-form-item-label::after{
  content: "";
}
</style>